<template>
    <basic-container>
        <div class="header-container">
            <TitleComponent mainTitle="用户" subTitle="列表" />
            <el-button type="primary" class="add-button" @click="handleAdd">新增</el-button>
        </div>
        <avue-crud :option="option" :table-loading="crudData.loading" :data="crudData.data" :page.sync="crudData.page"
            v-model="crudData.form" ref="crud" @on-load="onLoad"
             :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.containerBackground : variables.containerLightBackground, color:sideTheme === 'theme-dark' ? variables.containerColor : variables.containerLightColor,}"
            >

            <template #avatar="{ row }">
                <el-avatar shape="square" :size="40" :src="row.avatar" />
            </template>

            <template #phone="{ row }">
                <div class="phone-cell">
                    <el-tooltip content="复制手机号" placement="top">
                        <el-icon @click="copyToClipboard(row.phone)" class="copy-icon" size="20">
                            <el-icon-document-copy />
                        </el-icon>
                    </el-tooltip>
                    {{ row.phone }}
                </div>
            </template>

            <template #team1="{ row }">
                <el-button type="text" @click="filterByTeam1(row.team1)">{{ row.team1 }}</el-button>
            </template>

            <template #team2="{ row }">
                <el-button type="text" @click="filterByTeam2(row.phone)">{{ row.team2 }}</el-button>
            </template>

            <template #team3="{ row }">
                <el-button type="text" @click="filterByTeam3(row.teamNumber)">{{ row.team3 }}</el-button>
            </template>

            <template #disabledUser="{ row }">
                <el-switch v-model="row.disabledUser" style="--el-switch-on-color: #4E9876; " :inactive-value="0"
                    @change="handleSwitchChange('disabledUser')" />
            </template>

            <template #disableWithdraw="{ row }">
                <el-switch v-model="row.disableWithdraw" style="--el-switch-on-color: #4E9876; " :inactive-value="0"
                    @change="handleSwitchChange('disableWithdraw')" />
            </template>

            <template #disableFakeOrder="{ row }">
                <el-switch v-model="row.disableFakeOrder" style="--el-switch-on-color: #4E9876; " :inactive-value="0"
                    @change="handleSwitchChange('disableFakeOrder')" />
            </template>

            <template #menu="{ row }">
                <el-dropdown @command="(command) => handleCommand(command, row)">
                    <span class="el-dropdown-link">┇</span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item command="edit">编辑</el-dropdown-item>
                            <el-dropdown-item command="delete">删除</el-dropdown-item>
                            <el-dropdown-item divided command="fundOperation">资金操作</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </template>

        </avue-crud>


        <el-dialog v-model="dialogVisible" :title="'账号：' + selectedAccount" width="25%">
            <div>
                <el-form :model="form">
                    <el-form-item label="资金类型">
                        <el-radio-group v-model="form.type">
                            <el-radio label="余额">余额</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="操作">
                        <el-radio-group v-model="form.action">
                            <el-radio label="增加">增加</el-radio>
                            <el-radio label="减少">减少</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="数量">
                        <el-input v-model="form.amount" placeholder="输入数量"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer1">
                <el-button @click="handleClose"  icon="el-icon-info-filled">重置</el-button>
                <el-button type="success"  icon="el-icon-document" @click="handleSubmit">提交</el-button>
            </span>
        </el-dialog>

        <!-- 确认删除对话框 -->
        <!-- <el-dialog title="确认删除" v-model="confirmDeleteVisible" width="30%" @close="handleDeleteCancel">
            <span>确定要删除该记录吗？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleDeleteCancel">取消</el-button>
                <el-button type="primary" @click="handleDeleteConfirm">确认</el-button>
            </span>
        </el-dialog> -->


        <el-dialog v-model="confirmDeleteVisible" @close="handleDeleteCancel" title="" width="440" destroy-on-close
            center class="custom-dialog">
            <div class="swal2-header">
                <div class="swal2-icon swal2-question swal2-animate-question-icon"></div>
                <div class="swal2_fs">确认删除？</div>
            </div>
            <div class="swal2_he">ID - {{ currentRow.id }}</div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="success" class="btn btn-primary" @click="handleDeleteConfirm">
                        确认
                    </el-button>
                    <el-button class="btn" type="" @click="handleDeleteCancel">
                        取消
                    </el-button>
                </div>
            </template>
        </el-dialog>



        <!-- <FundOperationDialog :visible="dialogVisible" :account="selectedAccount" /> -->
    </basic-container>


</template>
<script setup lang="ts" name="taskDetail">
import { reactive, ref,computed } from 'vue';
import { ElMessage } from 'element-plus'
import TitleComponent from '@/components/title/index.vue';
import BasicContainer from '@/components/basic-container/main.vue';
import { useRouter } from 'vue-router';
// import {getList} from "@/api/user/overview.js";


import variables from '@/assets/styles/variables.module.scss'
import useSettingsStore from '@/store/modules/settings'

const settingsStore = useSettingsStore();
console.log('settingsStoretest',settingsStore);
const sideTheme = computed(() => settingsStore.sideTheme);

let option: any = reactive({
    expand: false,
    height: 'auto',
    calcHeight: 100,
    searchShow: true,
    searchMenuSpan: 6,
    tip: false,
    border: true,
    index: false,
    viewBtn: false,
    editBtn: false,
    delBtn: false,
    addBtn: false,
    menuFixed: 'right',
    labelWidth: 130,
    meun: false,
    gridBtn: false,
    selection: true,
    searchLabelWidth: 110,
    indexLabel: '序号',
    saveBtnText: '确定',
    refreshBtn: true, // 刷新按钮
    columnBtn: false,
    searchShowBtn: false,
    indexWidth: 60,
    column: [
        {
            label: "编号",
            prop: "index",
            // search: true,
            searchLabelWidth: '100px',
            sortable: true,
            span: 24,
        },
        {
            label: "所属代理",
            prop: "proxy",
            // search: true,
            span: 24,
        },
        {
            label: "头像",
            prop: "avatar",
            span: 24,
        },
        {
            label: "手机号",
            prop: "phone",
            span: 24,
        },
        {
            label: '团队关系',
            children: [{
                label: '上级',
                prop: 'team1'
            }, {
                label: '直推',
                prop: 'team2',
            }, {
                label: '团队',
                prop: 'team3',
            }]
        },
        {
            label: "余额",
            prop: "test",
            span: 24,
        },
        {
            label: "VIP等级",
            prop: "test1",
            span: 24,
        },
        {
            label: "首次升级时间",
            prop: "test2",
            span: 24,
        },
        {
            label: "Vip到期时间",
            prop: "test3",
            span: 24,
        },
        {
            label: "注册时间",
            prop: "test4",
            sortable: true,
            span: 24,
        },
        {
            label: "禁用用户",
            prop: "disabledUser",
            span: 24,
        },
        {
            label: "禁止提现",
            prop: "disableWithdraw",
            span: 24,
        },
        {
            label: "禁止刷单",
            prop: "disableFakeOrder",
            span: 24,
        },
    ]
})

let crudData: any = reactive({
    loadingSubmit: false,
    loadingSave: false,
    index_unit: [],
    loading: true,
    active: 1,
    page: {
        pageSize: 10,
        currentPage: 1,
    },
    filedArr: [],
    data: [],
    firstLoad: true // 添加一个标志表示是否是首次加载
})



const dialogVisible = ref(false);
const confirmDeleteVisible = ref(false);
const selectedAccount = ref("");
const currentRow = ref({});
const form = reactive({
    type: '余额',
    action: '增加',
    amount: null
});

// 跳转路由
const router = useRouter();

const handleAdd = () => {
    router.push('/user/userinfo/add');
}

// 根据操作的命令执行操作
const handleCommand = (command, row) => {
    currentRow.value = row;
    if (command === 'edit') {
        router.push({ path: '/user/userinfo/edit', query: { index: row.index } });
    } else if (command === 'delete') {
        confirmDeleteVisible.value = true;
    } else if (command === 'fundOperation') {
        selectedAccount.value = row.phone;
        dialogVisible.value = true;
    }
};


// 删除操作
const handleDeleteCancel = () => {
    confirmDeleteVisible.value = false;
};

const handleDeleteConfirm = () => {
    confirmDeleteVisible.value = false;
    // 执行删除操作
    console.log('删除记录');
    // 调用API添加实际的删除逻辑
};

// 资金操作
const resetForm = () => {
    form.amount = null;
    form.type = '余额';
    form.action = '增加';
};

const handleClose = () => {
    dialogVisible.value = false;
    resetForm();
};

const handleSubmit = () => {
    dialogVisible.value = false
    // 提交表单数据的逻辑
    console.log(form);
    resetForm();
};

// 切换选项执行操作
const handleSwitchChange = (field) => {
    if (!crudData.firstLoad) { // 只有在非首次加载时才显示消息
        console.log(`Field: ${field}`);
        // 添加更新数据请求
        // 请求返回结果输出
        ElMessage.success('更新成功');
    }
}

// 复制手机号
const copyToClipboard = (text) => {
    navigator.clipboard.writeText(text).then(() => {
        ElMessage.success('复制成功');
    }).catch(() => {
        ElMessage.error('复制失败');
    });
};

// 根据选择的值来筛选数据
const filterByTeam1 = (team) => {
    crudData.loading = true;
    // 根据team值来筛选数据
    const filteredData = crudData.data.filter(item => item.phone === team);
    crudData.data = filteredData;
    crudData.loading = false;
};

const filterByTeam2 = (phone) => {
    crudData.loading = true;
    // 根据team值来筛选数据
    const filteredData = crudData.data.filter(item => item.team1 === phone);
    crudData.data = filteredData;
    crudData.loading = false;
};


// 团队有个团队编号，根据团队编号查询
const filterByTeam3 = (teamNumber) => {
    crudData.loading = true;
    // 根据team值来筛选数据
    const filteredData = crudData.data.filter(item => item.teamNumber === teamNumber);
    crudData.data = filteredData;
    crudData.loading = false;
};

const onLoad = () => {
    crudData.loading = false;
    crudData.data = [
        {
            id: '662303',
            index: '662303',
            proxy: '4412349654',
            avatar: '/src/assets/images/avatar.png',
            phone: '45353451',
            team1: '43154',
            team2: '2',
            team3: '5',
            teamNumber: '1',
            test: 0,
            test1: 'VIP3',
            test2: '2023-06-19 05:40:22',
            test3: '2024-06-18 05:48:04',
            test4: '2023-06-19 05:29:59',
            disabledUser: true,
            disableWithdraw: true,
            disableFakeOrder: false
        },
        {
            id: '662301',
            index: '662301',
            proxy: '441223784',
            avatar: '/src/assets/images/avatar.png',
            phone: '45433451',
            team1: '43154',
            team2: '2',
            team3: '5',
            teamNumber: '1',
            test: 0,
            test1: 'VIP4',
            test2: '2023-06-17 05:40:22',
            test3: '2024-06-12 05:48:04',
            test4: '2023-06-14 05:29:59',
            disabledUser: true,
            disableWithdraw: false,
            disableFakeOrder: false
        },
        {
            id: '662301',
            index: '662301',
            proxy: '241784',
            avatar: '/src/assets/images/avatar.png',
            phone: '43154',
            team1: '',
            team2: '2',
            team3: '5',
            teamNumber: '2',
            test: 0,
            test1: 'VIP4',
            test2: '2023-06-17 05:40:22',
            test3: '2024-06-12 05:48:04',
            test4: '2023-06-14 05:29:59',
            disabledUser: true,
            disableWithdraw: false,
            disableFakeOrder: false
        }
    ]
    crudData.page.total = crudData.data.length;
    // 设置首次加载标志为false
    setTimeout(() => {
        crudData.firstLoad = false;
    }, 1000);

    // getList().then((res: any) => {
    //     console.log('getReviewLog--', res);
    //     const Data = res.data.data;
    //     // crudData.page.total = Data.total;
    //     crudData.logData = Data;
    //     crudData.loading = false;
    // });
}
</script>
<style scoped lang="scss">
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-right: 20px;
}

.add-button {
    margin-left: 20px;
}

.phone-cell {
    display: flex;
    align-items: center;
}

.copy-icon {
    cursor: pointer;
    margin-right: 5px;
}


.el-dialog__wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-dialog {
    display: flex;
    align-items: center;
    justify-content: center;
}

.swal2-header {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.swal2-icon {
    position: relative;
    box-sizing: content-box;
    justify-content: center;
    width: 5em;
    height: 5em;
    margin: 1.25em auto 1.875em;
    zoom: normal;
    border: 0.25em solid transparent;
    border-radius: 50%;
    line-height: 5em;
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.swal2-icon.swal2-question::before {
    content: "?";
}

.swal2-icon::before {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 92%;
    font-size: 3.75em;
}

.swal2-icon.swal2-question {
    border-color: #c9dae1;
    color: #87adbd;
}

.swal2_fs {
    margin: 0 0 0.4em;
    padding: 0;
    font-size: 25px;
    color: #595959;
    text-align: center;
    font-weight: 400 !important;
}

.swal2_he {
    text-align: center;
    color: #545454;
    font-size: 1.125em;
    font-weight: 300;
    line-height: normal;
    word-wrap: break-word;
}

.btn {
    padding: 0.54rem 1.2rem !important;
    height: 34px;
    line-height: 1.2;
    border-radius: 0.2rem;
    cursor: pointer;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.065),
        0 2px 2px 0 rgba(0, 0, 0, 0.065), 0 1px 5px 1px rgba(0, 0, 0, 0.065);
}

.btn-primary {
    color: #fff;
    background-color: #4e9876;
    border-color: #4e9876;
}

.avue-form__group ::v-deep .el-form-item {
    width: 800px !important;
}

.dialog-footer1{
    display: flex;
    justify-content: space-around;
    align-items: center;
}



::v-deep .avue-crud__header  {
    background-color: var(--background-color) ;
}

::v-deep .el-card__body  {
    background-color: var(--background-color) ;
}

::v-deep .avue-crud__pagination {
    background-color: var(--background-color) ;
}
::v-deep .el-table__inner-wrapper {
    background-color: var(--background-color) ;
    // border: 1px solid red;
}
::v-deep .el-table__row {
    background-color: var(--table-background-color);
    color:var(--text-color);
    // border: 1px solid red;
}

::v-deep .avue-crud .el-table th.el-table__cell {
    background-color: var(--header-background-color) !important;
    color:var(--text-color);
    // border: 1px solid red;
}

::v-deep .el-select__wrapper {
    background-color: var(--header-background-color) !important;
    color: var(--text-color);
}

::v-deep .el-input__wrapper{
    background-color: var(--header-background-color) !important;
    color:var(--text-color) !important;
}

::v-deep .el-pagination__total{
    color:var(--text-color) !important;
}
::v-deep .el-pagination__jump{
    color:var(--text-color) !important;
}
::v-deep .el-input__inner{
    color:var(--text-color) !important;
}
::v-deep .btn-next{
    background-color: var(--header-background-color) !important;
}
::v-deep .btn-prev{
    background-color: var(--header-background-color) !important;
}

::v-deep .el-select .el-input__inner {
    background-color: red !important; /* 背景色 */
    border-color: #dcdfe6; /* 边框颜色 */
}
// ::v-deep .el-card__body {
//    box-shadow: 0 2px 5px rgba(0,0,0,0.1), 0 0 4px rgba(0,0,0,0.1) inset;
// }

</style>